<template>
  <div class="problem-submissions-tab">
    <div class="submissions-content">
      <!-- 提交记录表格 -->
      <div class="submissions-table">
        <a-table
          :columns="columns"
          :data-source="props.questionSubmitData"
          :pagination="false"
          :loading="loading"
          size="middle"
          :show-header="true"
          class="submissions-table-content"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'createTime'">
              <span class="submit-time">{{
                dayjs(record?.createTime).format('YYYY-MM-DD HH:mm')
              }}</span>
            </template>
            <template v-else-if="column.key === 'status'">
              <span :class="['status-text', getStatusClass(record?.judgeInfo?.message)]">
                {{ record?.judgeInfo?.message }}
              </span>
            </template>

            <template v-else-if="column.key === 'runtime'">
              <span class="runtime-text">{{ record?.judgeInfo?.time }}</span>
            </template>

            <template v-else-if="column.key === 'memory'">
              <span class="memory-text">{{ record.judgeInfo?.memory }}</span>
            </template>

            <template v-else-if="column.key === 'language'">
              <span class="language-text">{{ record.language }}</span>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="() => handleEdit(record)">详情</a>
                <a-divider type="vertical" />
                <a @click="() => showAnalysisModal(record)">查看报告</a>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- AI分析模态框 -->
    <AIAnalysisModal
      v-model:visible="analysisModalVisible"
      :question-data="questionData"
      :submission-data="questionSubmitData"
      @close="handleAnalysisModalClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import AIAnalysisModal from '../AIAnalysisModal.vue'

interface Props {
  questionSubmitData?: API.QuestionSubmitVO[]
  questionData?:API.QuestionVO
}

const props = defineProps<Props>()

// 状态管理
const loading = ref(false)

// AI分析模态框相关
const analysisModalVisible = ref(false)
const selectedSubmission = ref(null)

// 表格列配置 - 参考图片布局
const columns = [
  {
    title: '提交时间',
    dataIndex: 'submitTime',
    key: 'createTime',
    width: 70,
  },
  {
    title: '提交结果',
    dataIndex: 'status',
    key: 'status',
    width: 50,
  },
  {
    title: '执行用时 (ms)',
    dataIndex: 'runtime',
    key: 'runtime',
    width: 50,
  },
  {
    title: '内存消耗 (MB)',
    dataIndex: 'memory',
    key: 'memory',
    width: 50,
  },
  {
    title: '语言',
    dataIndex: 'language',
    key: 'language',
    width: 30,
  },
  {
    title: '操作',
    key: 'action',
    width: 50,
    fixed: 'right' as const,
  },
]

// 获取状态样式类
const getStatusClass = (status: string) => {
  switch (status) {
    case 'Accepted':
      return 'status-success'

    case 'Wrong Answer':
      return 'status-wrong'

    case 'Compile Error':
      return 'status-compile-error'

    case 'Memory Limit Exceeded':
      return 'status-memory-limit'

    case 'Time Limit Exceeded':
      return 'status-time-limit'

    case 'Presentation Error':
      return 'status-presentation-error'
    case 'Waiting':
      return 'status-waiting'
    case 'Output Limit Exceeded':
      return 'status-output-limit'
    case 'Dangerous Operation':
      return 'status-dangerous'
    case 'Runtime Error':
      return 'status-runtime-error'
    case 'System Error':
      return 'status-system-error'
    default:
      return 'status-default'
  }
}

// 处理详情点击
const handleEdit = (record: any) => {
  console.log('查看详情:', record)
  // 这里可以添加查看详情的逻辑
}

// 显示AI分析模态框
const showAnalysisModal = (record: any) => {
  selectedSubmission.value = record
  analysisModalVisible.value = true
}

// 关闭AI分析模态框
const handleAnalysisModalClose = () => {
  analysisModalVisible.value = false
  selectedSubmission.value = null
}
</script>

<style scoped>
.problem-submissions-tab {
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

.submissions-content {
  padding: 0;
}

.submissions-table {
  background: #fff;
}

/* 表格样式优化 - 参考图片设计 */
.submissions-table-content :deep(.ant-table) {
  font-size: 14px;
}

.submissions-table-content :deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 500;
  color: #666;
  padding: 12px 16px;
}

.submissions-table-content :deep(.ant-table-tbody > tr > td) {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.submissions-table-content :deep(.ant-table-tbody > tr:hover > td) {
  background: #f8f9fa;
}

/* 提交时间样式 */
.submit-time {
  color: #333;
  font-size: 14px;
}

/* 状态文字样式 */
.status-text {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  min-width: 80px;
  text-align: center;
}

/* 成功状态 - 绿色 */
.status-success {
  color: #ffffff;
  background-color: #52c41a;
  border: 1px solid #52c41a;
}

/* 答案错误 - 红色 */
.status-wrong {
  color: #ffffff;
  background-color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

/* 编译错误 - 深红色 */
.status-compile-error {
  color: #ffffff;
  background-color: #cf1322;
  border: 1px solid #cf1322;
}

/* 内存溢出 - 橙红色 */
.status-memory-limit {
  color: #ffffff;
  background-color: #fa541c;
  border: 1px solid #fa541c;
}

/* 超时 - 橙色 */
.status-time-limit {
  color: #ffffff;
  background-color: #fa8c16;
  border: 1px solid #fa8c16;
}

/* 展示错误 - 黄色 */
.status-presentation-error {
  color: #333333;
  background-color: #fadb14;
  border: 1px solid #fadb14;
}

/* 等待中 - 蓝色 */
.status-waiting {
  color: #ffffff;
  background-color: #1890ff;
  border: 1px solid #1890ff;
  animation: pulse 2s infinite;
}

/* 输出溢出 - 紫色 */
.status-output-limit {
  color: #ffffff;
  background-color: #722ed1;
  border: 1px solid #722ed1;
}

/* 危险操作 - 深红色 */
.status-dangerous {
  color: #ffffff;
  background-color: #a8071a;
  border: 1px solid #a8071a;
}

/* 运行错误 - 品红色 */
.status-runtime-error {
  color: #ffffff;
  background-color: #eb2f96;
  border: 1px solid #eb2f96;
}

/* 系统错误 - 灰色 */
.status-system-error {
  color: #ffffff;
  background-color: #595959;
  border: 1px solid #595959;
}

/* 默认状态 - 浅灰色 */
.status-default {
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
}

/* 等待中状态的脉冲动画 */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* 运行时间和内存样式 */
.runtime-text,
.memory-text {
  color: #333;
  font-size: 14px;
}

/* 语言标签样式 */
.language-text {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

/* 自定义滚动条 */
.problem-submissions-tab::-webkit-scrollbar {
  width: 6px;
}

.problem-submissions-tab::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 3px;
}

.problem-submissions-tab::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.problem-submissions-tab::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
</style>
